<template>
	<view class="mapBox">
		<map
			id="maps"
			class="map"
			style="width: 100%; height: 100%"
			:longitude="Location.longitude"
			:latitude="Location.latitude"
			:markers="markers"
			:enable-zoom="false"
			:enable-scroll="false"
		></map>
		<!-- 			@regionchange="regionchange" -->
	</view>
</template>

<script>
export default {
	name: 'mapCom',
	props: {
		Location: {
			type: Object,
			default: {}
		}
	},
	watch: {
		Location: {
			immediate: true,
			deep: true,
			handler(val) {
				this.$set(this.markers, 0, {
					id: 1,
					latitude: val.latitude,
					longitude: val.longitude,
					iconPath: '../../static/images/index/address1.png'
				});
			}
		}
	},
	data() {
		return {
			latitude: 35.948, //中心坐标
			longitude: 120.151, //中心坐标
			markers: [] //标点列表
		};
	},
	onLoad(option) {
		if (option.addressInfo != '') {
			this.latitude = option.addressInfo.split(',')[1];
			this.longitude = option.addressInfo.split(',')[0];
		}
	},

	methods: {
		// 点击确定按钮
		confirmClickHandle() {
			var pages = getCurrentPages(); //当前页
			var beforePage = pages[pages.length - 2]; //上个页面
			let address = this.markers[0].longitude.toFixed(6) + ',' + this.markers[0].latitude.toFixed(6);
			beforePage.$vm.addressInfo = address;
			uni.navigateBack();
		},
		// 拖拽地图
		regionchange(event) {
			if (event.type == 'regionchange') {
				this.getCenterLanLat();
			}
		},
		// 获取当前地图中心的经纬度
		getCenterLanLat() {
			let self = this;
			this.mapContext = uni.createMapContext('maps', this);
			this.mapContext.getCenterLocation({
				type: 'gcj02',
				success: (res) => {
					// let address = {
					// 	latitude: res.latitude,
					// 	longitude: res.longitude
					// };
					this.$set(this.markers, 0, {
						id: 1,
						latitude: this.Location.latitude,
						longitude: this.Location.longitude,
						iconPath: '../../static/images/index/address1.png'
					});
				},
				fail: (err) => {
					// console.log('获取当前地图中心的经纬度2', err);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.mapBox {
	height: 500rpx;
	// background-color: pink;
}
#maps{
	// z-index:888;
}
</style>
